<template>
    <div class="top-box">
        <div class="top-nav-box">
            <div class="long-title">全部分类</div>
            <div class="nav-cont">
                <ul>
                    <li class="index"><span>首页</span></li>
                    <li class="qc"><span>闪购</span></li>
                    <li class="qc"><span>限时抢</span></li>
                    <li class="qc"><span>团购</span></li>
                    <li class="qc last"><span>大包装</span></li>
                </ul>
                <div class="nav-extra">
                    <i class="am-icon-user-secret am-icon-md nav-user"></i><b></b>我的福利
                    <i class="am-icon-angle-right" style="padding-left: 10px;"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>

</script>
<style scoped lang="scss">
.top-box{
    display: none;
}
@media only screen and (min-width: 1025px) {
    .top-box{
        display: block;
        margin-top: 20px;
        height: 45px;
        .top-nav-box{
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }
        .long-title{
            background:#d2364c;
            color:#fff ;
            height: 45px;
            line-height: 45px;
            position: absolute;
            width:150px ;
            text-align: center;
            font-size:16px ;
            top:0;
            z-index: 6;
        }
        .nav-cont{
            position: absolute;
            width:100% ;
            top:0;
            ul{
                list-style: none;
                margin: 0;
                padding-left:150px;
                li{
                    float: left;
                    height: 45px;
                    line-height: 45px;
                    color: #333333;
                    font-size: 16px;
                    font-weight: 700;
                    cursor: pointer;
                    span{
                        padding: 0 25px;
                        display: inline-block;
                    }
                }
                li:before{
                    content: "";
                    display: inline-block;
                    border-right: 1px solid #d9d9d9;
                    margin-left: -1px;
                    height: 16px;
                    width: 0;
                    vertical-align: middle;
                }
            }
        }
        .nav-extra{
            position: absolute;
            right:0;
            top:6px;
            font-size: 16px;
            color:#fcff00;
            line-height:33px;
            height:33px ;
            width:160px;
            text-align:center;
            cursor: pointer;
            background: url("../../assets/images/extra.png");
        }
    }
}
</style>